Майстерність CSS Flexbox: Розширене вирівнювання та розподіл

Вже кілька років CSS Flexbox є наріжним каменем сучасної веб-верстки. Більшість розробників звикли використовувати display: flex для вирівнювання елементів у рядку або створення простих центрованих компонентів. Однак справжня майстерність Flexbox полягає в розумінні його більш тонких властивостей для розширеного вирівнювання та динамічного розподілу. Коли ви виходите за межі основ justify-content: center та align-items: center, ви відкриваєте можливість створювати складні, адаптивні та гнучкі макети з дивовижною легкістю.

Цей посібник призначений для розробників, які знають основи, але хочуть поглибити свої знання. Ми розглянемо властивості, що контролюють багаторядкове вирівнювання, складну логіку зростання та стиснення flex-елементів, а також кілька потужних патернів, що вирішують поширені проблеми верстки. Будьте готові перейти від звичайного користувача до впевненого архітектора Flexbox.

Основа: Швидке нагадування про головну та поперечну осі

Перш ніж занурюватися у складніші теми, надзвичайно важливо мати тверде розуміння двох осей, які керують кожним flex-контейнером. Усі властивості вирівнювання та розподілу у Flexbox працюють вздовж однієї з цих двох осей.

• Головна вісь: Це основна вісь, вздовж якої розташовуються flex-елементи. Її напрямок визначається властивістю flex-direction.
• Поперечна вісь: Ця вісь завжди перпендикулярна до головної осі.

Ключовий момент полягає в тому, що ці осі не є статичними. Вони переорієнтовуються залежно від значення вашої властивості flex-direction:

• flex-direction: row (за замовчуванням): Головна вісь є горизонтальною (зліва-направо), а поперечна вісь — вертикальною (зверху-вниз).
• flex-direction: column: Головна вісь стає вертикальною (зверху-вниз), а поперечна — горизонтальною (зліва-направо).
• flex-direction: row-reverse: Головна вісь є горизонтальною, але йде справа-наліво.
• flex-direction: column-reverse: Головна вісь є вертикальною, але йде знизу-вгору.

Забуття цієї фундаментальної концепції є джерелом більшості непорозумінь із Flexbox. Завжди запитуйте себе: "Куди спрямована моя головна вісь?", перш ніж застосовувати властивість вирівнювання.

Опановуємо розподіл по головній осі за допомогою justify-content

Властивість justify-content контролює, як простір розподіляється між та навколо flex-елементів вздовж головної осі. Хоча flex-start, flex-end та center є простими, справжня сила криється у значеннях, що відповідають за розподіл простору.

Глибший погляд на розподіл простору

Давайте роз'яснимо тонкі, але важливі відмінності між space-between, space-around та space-evenly.

• justify-content: space-between;

  Це значення рівномірно розподіляє елементи по головній осі. Перший елемент притискається до самого початку контейнера, а останній — до самого кінця. Увесь вільний простір ділиться порівну між елементами. На зовнішніх краях простору немає.

  Випадок використання: Ідеально підходить для навігаційних панелей, де ви хочете, щоб логотип був зліва, а посилання — справа, з рівними проміжками між посиланнями.

• justify-content: space-around;

  Це значення розподіляє елементи з однаковим простором навколо кожного елемента. Уявіть, що кожен елемент має "бульбашку" простору зліва та справа. Коли "бульбашки" сусідніх елементів зустрічаються, простір між ними здається вдвічі більшим за простір біля країв контейнера. Зокрема, простір на зовнішніх краях дорівнює половині простору між елементами.

  Випадок використання: Корисно для макетів карток або галерей, де ви хочете, щоб елементи мали трохи вільного місця від країв контейнера, але не були впритул до них.

• justify-content: space-evenly;

  Це найбільш інтуїтивне з трьох значень. Воно гарантує, що простір між будь-якими двома елементами є точно таким самим, як і простір між першим/останнім елементом та краєм контейнера. Кожен проміжок є ідентичним.

  Випадок використання: Ідеально, коли вам потрібен ідеально збалансований, симетричний макет. Це часто те, що дизайнери неявно хочуть, коли просять про "рівномірні відступи".

Підкорення вирівнювання по поперечній осі за допомогою align-items та align-self

Тоді як justify-content керує головною віссю, align-items управляє вирівнюванням елементів за замовчуванням вздовж поперечної осі в межах одного рядка.

Розуміння значень `align-items`

• align-items: stretch; (за замовчуванням): Ось чому ваші flex-елементи часто здаються такими, що заповнюють висоту свого контейнера, хоча ви їх про це не просили. Елементи розтягуються, щоб заповнити розмір контейнера вздовж поперечної осі (наприклад, висоту в контейнері з flex-direction: row).
• align-items: flex-start;: Елементи притискаються до початку поперечної осі.
• align-items: flex-end;: Елементи притискаються до кінця поперечної осі.
• align-items: center;: Елементи центрують вздовж поперечної осі.
• align-items: baseline;: Це потужне і недостатньо використовуване значення. Елементи вирівнюються так, щоб їхні базові лінії тексту збігалися. Це неймовірно корисно, коли у вас є елементи з різними розмірами шрифтів (наприклад, головний заголовок поруч із підзаголовком) і ви хочете, щоб вони вирівнювалися за текстом, а не лише за межами своїх блоків.

Перевизначення за допомогою align-self

А що, як ви хочете, щоб один конкретний елемент поводився інакше, ніж інші? Саме тут на допомогу приходить align-self. Застосований до окремого flex-елемента, він перевизначає властивість align-items контейнера лише для цього елемента. Він приймає ті ж самі значення, що й align-items (плюс `auto`, яке скидає його до значення контейнера).

Приклад: Уявіть ряд карток, усі центровані за допомогою align-items: center. Ви можете виділити одну "обрану" картку, застосувавши до неї align-self: stretch;, зробивши її вищою за інші.

Неоспіваний герой: Розширений розподіл за допомогою align-content

Це, мабуть, найбільш неправильно зрозуміла властивість у Flexbox, і її опанування є ознакою високого професіоналізму. Поширеним джерелом плутанини є її схожість з align-items.

Ось критичне правило: align-content НЕ МАЄ ЕФЕКТУ, коли всі ваші flex-елементи знаходяться в одному рядку. Вона працює лише тоді, коли у вас є багаторядковий flex-контейнер (тобто ви встановили flex-wrap: wrap; і елементи дійсно перенеслися на нові рядки).

Думайте про це так:

• align-items вирівнює елементи в межах їхнього рядка.
• align-content вирівнює самі рядки в межах контейнера. Вона контролює розподіл простору по поперечній осі між рядками елементів.

По суті, вона діє як justify-content, але для поперечної осі. Її значення майже ідентичні:

• align-content: flex-start; (за замовчуванням): Усі рядки притискаються до початку контейнера.
• align-content: flex-end;: Усі рядки притискаються до кінця.
• align-content: center;: Усі рядки групуються в центрі.
• align-content: space-between;: Перший рядок знаходиться на початку, останній — в кінці, а простір рівномірно розподіляється між рядками.
• align-content: space-around;: Рівний простір розміщується навколо кожного рядка.
• align-content: space-evenly;: Відстань між кожним рядком є ідентичною.
• align-content: stretch;: Рядки розтягуються, щоб зайняти вільний простір.

Випадок використання: Уявіть фотогалерею, де елементи переносяться. Якщо контейнер має фіксовану висоту, може залишитися зайвий вертикальний простір. За замовчуванням цей простір з'являється внизу. Використовуючи align-content: space-between; або align-content: center;, ви можете контролювати вертикальний розподіл всієї вашої сітки фотографій, створюючи набагато професійніший вигляд макета.

Динамічне визначення розмірів та розподіл: Скорочення flex

Статичні макети зустрічаються рідко. Справжня сила Flexbox полягає в його здатності обробляти динамічний контент і доступний простір. Це контролюється трьома властивостями, які часто встановлюються через скорочення flex: flex-grow, flex-shrink та flex-basis.

1. flex-basis: Початкова точка

Перш ніж відбудеться будь-яке зростання чи стиснення, Flexbox потребує початкового розміру для кожного елемента. Це робота flex-basis. Вона визначає розмір елемента за замовчуванням вздовж головної осі.

• Якщо встановлено конкретну довжину (наприклад, 200px або 10rem), це стає початковим розміром елемента.
• Якщо встановлено auto, він шукає властивість `width` або `height` на елементі. Якщо її немає, розмір визначається на основі вмісту елемента.
• Якщо встановлено 0, елемент не має початкового розміру, і його кінцевий розмір визначається виключно його пропорцією flex-grow.

Найкраща практика: Часто краще використовувати flex-basis замість `width` у flex-контексті, оскільки це більш явно визначає розмір елемента в контексті головної осі.

2. flex-grow: Заповнення позитивного простору

Коли у flex-контейнері є додатковий простір вздовж його головної осі, flex-grow визначає, як цей простір розподіляється. Це безрозмірна пропорція.

• Значення за замовчуванням — 0, що означає, що елементи не будуть зростати, щоб заповнити додатковий простір.
• Якщо всі елементи мають flex-grow: 1, додатковий простір розподіляється між ними порівну.
• Якщо один елемент має flex-grow: 2, а інший — flex-grow: 1, перший елемент отримає вдвічі більше додаткового простору, ніж другий.

3. flex-shrink: Обробка негативного простору (переповнення)

Це аналог `flex-grow`. Коли в контейнері недостатньо місця, щоб вмістити всі елементи з їхнім flex-basis, вони повинні стиснутися. flex-shrink контролює, наскільки вони стискаються.

• Значення за замовчуванням — 1, що означає, що всі елементи стискаються пропорційно за замовчуванням, щоб запобігти переповненню.
• Якщо ви встановите flex-shrink: 0 для елемента, він не буде стискатися. Він збереже свій розмір flex-basis, що потенційно може спричинити переповнення контейнера. Це корисно для таких елементів, як логотипи або кнопки, які ніколи не повинні стискатися.

Скорочення flex: Збираємо все разом

Властивість flex — це скорочення для flex-grow, flex-shrink та flex-basis, саме в такому порядку.

• flex: 0 1 auto; (за замовчуванням): Елемент не може зростати, може стискатися, а його основа визначається його шириною/висотою або вмістом.
• flex: 1; (скорочення для flex: 1 1 0;): Дуже поширене значення. Елемент може зростати і стискатися, а його початковий розмір дорівнює 0. Це фактично змушує елементи ділити простір виключно на основі їхньої пропорції flex-grow.
• flex: auto; (скорочення для flex: 1 1 auto;): Елемент може зростати і стискатися, а його основа визначається його вмістом. Це дозволяє елементам мати різні розміри залежно від їхнього вмісту, але все одно гнучко поглинати додатковий простір.
• flex: none; (скорочення для flex: 0 0 auto;): Елемент абсолютно негнучкий. Він не може ані зростати, ані стискатися.

Практичні випадки використання та розширені сценарії

Сценарій 1: Прилипаючий футер (макет "Святий Грааль")

Класична проблема веб-дизайну: як змусити футер прилипати до низу сторінки, навіть коли контенту мало, але природно опускатися вниз, коли контенту багато.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

Зробивши основний контейнер сторінки flexbox-контейнером на основі стовпця та встановивши для основної контентної області flex-grow: 1, ми наказуємо їй зайняти весь доступний вертикальний простір, тим самим притискаючи футер до низу вікна перегляду.

Сценарій 2: Автоматичні відступи для розділення груп

Як створити навігаційну панель з логотипом зліва та групою посилань справа? Хоча justify-content: space-between працює, якщо логотип є єдиним flex-елементом, що робити, якщо у вас кілька елементів праворуч?

Рішення полягає в магії автоматичних відступів у Flexbox.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

У flex-контейнері автоматичний відступ жадібно поглинає весь доступний простір у тому напрямку, де він застосований. Встановивши margin-left: auto для групи навігаційних посилань, він створює гнучкий, порожній простір між логотипом та посиланнями, відсуваючи посилання до правого краю.

Сценарій 3: Медіа-об'єкт

Поширений UI-патерн, що містить зображення або іконку з одного боку та описовий текст з іншого. Текст повинен займати весь вільний простір і витончено переноситися.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

Тут ключовим є flex-grow: 1 на контейнері з текстом. Це гарантує, що незалежно від ширини зображення, текстовий блок розшириться, щоб заповнити решту доступної ширини в контейнері.

Висновок: За межами вирівнювання, до свідомої верстки

Опанування Flexbox означає вихід за рамки простого центрування елементів. Це про розуміння взаємодії між осями, логіки розподілу простору та гнучкості розмірів елементів. Отримавши тверде розуміння align-content для багаторядкових макетів, скорочення flex для динамічного визначення розмірів та потужних патернів, як-от автоматичні відступи, ви зможете створювати макети, які не тільки візуально привабливі, але й надійні, адаптивні та семантично чисті.

Наступного разу, коли ви зіткнетеся зі складною задачею верстки, утримайтеся від спокуси використовувати float або складні хаки з позиціонуванням. Замість цього запитайте себе: Чи можна це вирішити за допомогою свідомого розподілу простору? Відповідь, найчастіше, буде знайдена в розширених можливостях CSS Flexbox.